<div class="layout-container" data-bind="css: { 'cloud-cluster-admin': applyColorCustomization, 'collapse-menu': collapseMenu() || smallScreen(), 'pin-notifications': notificationCenter.pinNotifications(), 'show-notifications': notificationCenter.showNotifications()}">
    <div data-bind="compose: { model: browserAlert }" class="bs3"></div>
    <aside class="top-alert" data-bind="visible: developerLicense">
        Developer License - Not for Production Use
    </aside>
    <aside class="top-alert shard-debug" data-bind="visible: singleShardName">
        <span>Displayed data is sourced from only a single shard &nbsp;&nbsp; (<i class="icon-shard"></i><strong data-bind="text: singleShardName"></strong> ) &nbsp;&nbsp;<a data-bind="attr: { href: allShardsUrl }"> <i class="icon-sharding"></i> Go to all shards mode</a></span>
    </aside>
    <aside class="top-alert" data-bind="visible: applyColorCustomization">
        !!! Running as Cloud Cluster Admin !!!  <a href="#" data-bind="click: disableColorCustomization">Disable color customization</a>
    </aside>
    <nav class="bs5 navbar">
        <div class="navbar-header">
            <a class="navbar-brand no-decor" data-bind="attr: { href: appUrls.clusterDashboard }">
                <div data-bind="attr: { class: logoClass() }">
                    <img data-bind="attr: { src: logoSrc() }" alt="RavenDB Logo" />
                    <div data-bind="visible: serverEnvironment, attr: { class: 'badge rounded-pill ms-auto text-uppercase margin-bottom-xxs ' + serverEnvironmentClass() }" title="Server environment">
                        <span data-bind="text: serverEnvironment"></span>
                    </div>
                </div>
                <div class="collapsed-logo">
                    <i class="icon-raven"></i>
                    <div data-bind="visible: serverEnvironment, attr: { class: 'badge rounded-pill server-environment-label__collapsed text-uppercase ' + serverEnvironmentClass() }" title="Server environment">
                        <span data-bind="text: serverEnvironmentShortText"></span>
                    </div>
                </div>
            </a>
        </div>
        <div id="navbar">
            <div style="flex-grow: 1;" data-bind="react: $root.studioSearchWithDatabaseSwitcherView"></div>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#" title="Change theme" class="theme-change no-decor" data-bind="click: $data.constructor.chooseTheme">
                        <i class="icon-theme"></i>
                    </a>
                </li>
                <li style="display:none"><a target="_blank" title="Help" data-bind="attr: { href: currentHelpLink }" class="icon-help"></a></li>
                <li data-bind="with: notificationCenter">
                    <a title="Notification Center" href="#" id="notification-toggle" class="btn-toggle no-decor" data-bind="click: showNotifications.toggle.bind(showNotifications), css: { 'active': showNotifications() }">
                        <span class="icon-changes"></span>
                        <span class="notification-counter show" data-bind="text: totalItemsCount(), attr: { 'data-count': totalItemsCount() }, css: { 'show': alertCountAnimation() }"></span>
                    </a>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </nav>
    <script type="text/html" id="collectionsMenuItem">
        <li>
            <!-- ko with: $root.collectionsTracker.getAllDocumentsCollection() -->
            <a data-bind="click: $parent.menu.navigate.bind($parent.menu), attr: { href: $root.urlForCollection($data) }, css: { 'active': $parent.item.isOpen($parent.menu.activeItem, $data) }">
                <i class="icon-documents"></i>
                <span>All Documents</span>
                <div class="collection-count" data-bind="attr: {title: documentCount().toLocaleString()}, css: { 'bounce': hasBounceClass }">
                    <div class="value label label-default" data-bind="text: countPrefix"></div>
                    <div data-bind="attr: { class: sizeClass }"></div>
                </div>
            </a>
            <!-- /ko -->
        </li>
        <li>
            <!-- ko with: $root.collectionsTracker.getAllRevisionsCollection() -->
            <a data-bind="click: $parent.menu.navigate.bind($parent.menu), attr: { href: $root.urlForAllRevisions() }, 
                          css: { 'active': $parent.item.isOpen($parent.menu.activeItem, $data) }">
                <i class="icon-revisions"></i>
                <span>All Revisions</span>
                <div class="collection-count" data-bind="attr: {title: documentCount().toLocaleString()}, css: { 'bounce': hasBounceClass }">
                    <div class="value label label-default" data-bind="text: countPrefix"></div>
                    <div data-bind="attr: { class: sizeClass }"></div>
                </div>
            </a>
            <!-- /ko -->
        </li>
        <li>
            <!-- ko with: $root.collectionsTracker.getRevisionsBinCollection() -->
            <a data-bind="click: $parent.menu.navigate.bind($parent.menu), attr: { href: $root.urlForRevisionsBin() }, 
                          css: { 'active': $parent.item.isOpen($parent.menu.activeItem, $data) }">
                <i class="icon-revisions-bin"></i>
                <span>Revisions Bin</span>
            </a>
            <!-- /ko -->
        </li>
        <hr data-bind="visible: $root.collectionsTracker.collections().length > 1" />
        <h3 data-bind="visible: $root.collectionsTracker.collections().length > 1, attr: { title: $root.collectionsCountText() + ' collections'}">
            Collections (<span data-bind="text: $root.collectionsCountText"></span>)
        </h3>
        <li class="scroll collections-list">
            <ul>
                <!-- ko foreach: $root.collectionsTracker.collections -->
                <li>
                    <a data-bind="click: $parent.menu.navigate.bind($parent.menu), attr: { href: $root.urlForCollection($data), title: name },
                                  css: { 'active': $parent.item.isOpen($parent.menu.activeItem, $data) }, visible: !isAllDocuments">
                        <span data-bind="text: name"></span>
                        <div class="collection-count" data-bind="attr: {title: documentCount().toLocaleString()}, css: { 'bounce' : hasBounceClass }">
                            <div class="value label label-default" data-bind="text: countPrefix"></div>
                            <div data-bind="attr: { class: sizeClass }"></div>
                        </div>
                    </a>
                </li>
                <!-- /ko -->
            </ul>
        </li>
        <hr />
    </script>

    <script type="text/html" id="leafMenuItem">
        <li data-bind="with: item">
            <a data-toggle="tooltip" data-html="true" data-bind="click: $parent.menu.navigate.bind($parent.menu), visible: nav,
                          attr: { href: path, 'data-original-title': $root.disableReason($data) },
                          css: { 'active': $parent.menu.activeItem() === $data, 'disabled': $root.disableReason($data) }">
                <i data-bind="css: css"></i>
                <span data-bind="text: title"></span>
                <div data-bind="if: badgeData() != null">
                    <div class="collection-count" data-bind="attr: { title: badgeData().toLocaleString() }">
                        <div class="value label" data-bind="text: countPrefix, css: { 'label-default': !badgeData() , 'label-danger': badgeData() }"></div>
                        <div data-bind="attr: { class: sizeClass }"></div>
                    </div>
                </div>
                <div data-bind="if: badgeHtml != null">
                    <div data-bind="html: badgeHtml"></div>
                </div>
            </a>
        </li>
    </script>

    <script type="text/html" id="intermediateMenuItem">
        <li class="arrow-right">
            <a data-bind="click: menu.handleIntermediateItemClick.bind(menu), css: { 'active': item.isOpen }, visible: item.nav">
                <i data-bind="css: item.css"></i>
                <span data-bind="text: item.title"></span>
            </a>
            <div data-bind="click: menu.handleLevelClick.bind(menu), attr: { 'data-level-name': item.title, 'data-level': item.depth() + 1, class: 'level ' + (item.isOpen() ? 'level-show ' : '') + 'level-' + (item.depth() + 1) }">
                <h2>
                    <a class="back" title="back"
                       data-bind="click: menu.back.bind(menu)"><i class="icon-chevron-left"></i></a>
                    <!-- ko text: item.title --><!-- /ko -->
                </h2>
                <ul data-bind="foreach: item.children">
                    <!-- ko template: { name: type + 'MenuItem', data: { item: $data, level: $parent.level + 1, menu: $parent.menu }} -->
                    <!-- /ko -->
                </ul>
            </div>
        </li>
    </script>

    <script type="text/html" id="separatorMenuItem">
        <li class="separator">
            <!-- ko if: !!item.title -->
            <h3 data-bind="text: item.title"></h3>
            <!-- /ko -->
            <!-- ko if: !item.title -->
            <hr />
            <!-- /ko -->
        </li>
    </script>

    <div id="resizeArea"></div>

    <nav id="main-menu" class="main-menu bs3"
         data-bind="with: mainMenu, attr: { 'data-level': mainMenu.level }">

        <div class="level-0"
             data-level="0"
             data-level-name="Menu"
             data-bind="click: handleLevelClick">
            <ul data-bind="foreach: items">
                <!-- ko template: { name: type + 'MenuItem', data: { item: $data, menu: $parent }} -->
                <!-- /ko -->
            </ul>
        </div>
        <button class="btn-collapse-menu" data-bind="click: $root.toggleMenu">
            <i class="icon-arrow-left"></i> Collapse Menu
        </button>
        <button class="btn-expand-menu" data-bind="click: $root.toggleMenu">
            <i class="icon-arrow-right"></i>
        </button>
    </nav>
    <div id="page-host-root" class="content-container">
        <div id="page-host" class="page-host" data-bind="router: { cacheViews: false }"></div>
        <div data-bind="react: $root.helpAndResourcesWidgetView, visible: $root.isHelpAndResourcesWidgetVisible" class="bs5" style="z-index: 9999;"></div>
    </div>
    <div class="notification-center-container bs3" data-bind="compose: notificationCenterView"></div>

    <footer class="status-footer bs3" data-bind="with: $root.footer">
        <div class="footer-left" data-bind="with: stats(), visible: stats">
            <div class="footer-item">
                <a data-bind="attr: { href: $parent.urlForDocuments() }" title="Documents"><i class="icon-documents"></i> <span data-bind="text: countOfDocuments().toLocaleString()"></span></a>
            </div>
            <div class="footer-item">
                <a title="Indexes" class="indexes-link" data-bind="attr: { href: $parent.urlForIndexes() }">
                    <i class="icon-index"></i>
                    <span data-bind="text: countOfIndexes().toLocaleString()"></span>
                </a>
                <a title="Stale Indexes" class="stale-indexes-link" data-bind="attr: { href: $parent.urlForStaleIndexes() }">
                    <span class="separator">|</span><span data-bind="text: countOfStaleIndexes().toLocaleString(), css: {'text-warning': countOfStaleIndexes}"></span>
                </a>
            </div>
            <div class="footer-item" data-bind="visible: countOfIndexingErrors">
                <a title="Indexing errors" class="text-danger" data-bind="attr: { href: $parent.urlForIndexingErrors() }">
                    <i class="icon-index-errors"></i> <span data-bind="text: countOfIndexingErrors().toLocaleString()"></span>
                </a>
            </div>
        </div>
        <div class="footer-left spinner" data-bind="visible: spinners.loading">
            <span class="global-spinner spinner-sm"></span> <strong>Loading, please wait</strong>
        </div>
        <div class="footer-right">
            <div class="footer-item bg-info" data-bind="visible: $root.clusterManager.votingInProgress">
                <a data-bind="attr: { href: $root.urlForCluster() }" title="Voting in progress"><i class="icon-cluster-node"></i><span>Voting in progress</span></a>
            </div>
            <div class="footer-item">
                <button class="btn btn-primary" title="Continue Test" data-bind="click: $root.continueTest.continue, visible: $root.continueTest.showContinueButton">
                    <i class="icon-play"></i> <span>Continue test</span>
                </button>
            </div>
            <div class="footer-item" data-bind="visible: twoFactorSessionExpiration">
                <a class="btn btn-2fa btn-sm lh-1" title="End current 2FA session" data-bind="click: logout">
                    <i class="icon-logout"></i> <span class="me-0">End session</span>
                </a>
            </div>
            <div class="footer-item" data-bind="visible: !$root.clientCertificate()">
                <a class="btn btn-danger btn-sm js-client-cert" data-bind="attr: { href: $root.urlForCertificates() }">
                    <i class="icon-unsecure"></i>
                </a>
            </div>
            <div class="footer-item" data-bind="visible: $root.clientCertificate(), with: $root.clientCertificate()">
                <a class="btn btn-sm js-client-cert" 
                   data-bind="attr: { href: $root.urlForCertificates() }, css: { 'btn-danger': $root.certificateExpirationState() === 'expired', 'btn-success': $root.certificateExpirationState() === 'valid', 'btn-warning': $root.certificateExpirationState() === 'aboutToExpire', 'pulse': $root.certificateExpirationState() === 'aboutToExpire'  }">
                    <i class="icon-lock" data-bind="visible: $root.certificateExpirationState() === 'valid'"></i>
                    <i class="icon-lock-cutout icon-addon-exclamation" data-bind="visible: $root.certificateExpirationState() !== 'valid'"></i>
                </a>
            </div>
            <div class="footer-item" data-bind="visible: $root.clusterManager.nodesCount() === 1, if: $root.clusterManager.nodesCount() === 1" title="Local node tag">
                <!-- when cluster contains single node - display fake button -->
                <a style="pointer-events: none">
                    <i class="icon-cluster"></i>
                    <span data-bind="text: 'Node ' + $root.clusterManager.localNodeTag()"></span>
                </a>
            </div>
            <div class="footer-item" data-bind="visible: $root.clusterManager.nodesCount() > 1, if: $root.clusterManager.nodesCount() > 1">
                <div class="btn-group dropup">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" title="Local node tag. Click to go to another cluster node">
                        <i class="icon-cluster"></i>
                        <span data-bind="text: 'Node ' + $root.clusterManager.localNodeTag()"></span>
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu dropup" data-bind="foreach: $root.clusterManager.topology().nodes">
                        <li>
                            <a target="_blank" title="Go to another cluster node" data-bind="attr: { href: $root.createUrlWithHashComputed(serverUrl) }">
                                <i data-bind="attr: { class: cssIcon() }"></i>
                                <span data-bind="text: 'Node ' + tag()"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-item">
                <a title="Studio Version" data-bind="attr: { href: urlForAbout }">
                    <i class="icon-client"></i> <span data-bind="text: $root.constructor.clientVersion"></span>
                </a>
            </div>
            <div class="footer-item">
                <a title="Server Version" data-bind="attr: { href: urlForAbout }">
                    <i class="icon-server"></i> <span data-bind="text: $root.constructor.buildInfo.serverBuildVersion() ? $root.constructor.buildInfo.serverBuildVersion().FullVersion : ''"></span>
                </a>
            </div>
            <div class="footer-item">
                <a title="License Information" data-bind="attr: { href: urlForAbout, class: licenseBgColorClass() + ' license btn btn-sm d-flex gap-1' }">
                    <i class="icon-license-information"></i>
                    <span data-bind="text: licenseTypeShortText()"></span>
                    <span data-bind="attr: { title: licenseStatusTooltip(), class: licenseClass() + ' license-status'}"></span>
                </a>
            </div>
            <div class="footer-item">
                <a title="Support Information" data-bind="attr: { href: urlForAbout, class: supportClass() + ' support btn btn-sm' }">
                    <i class="icon-support"></i>
                </a>
            </div>
            <div class="footer-item">
                <a href="https://ravendb.net/l/FUNILW" class="btn btn-ravendb btn-sm" title="RavenDB Community" target="_blank">
                    <i class="icon-community"></i>
                </a>
            </div>
        </div>
    </footer>
    <div class="connection-lost bs3" data-bind="css: { show: $root.constructor.showConnectionLost }">
        <div class="absolute-center">
            <h3>Connection lost</h3>
            <img src="../../Content/img/connection-lost.svg" width="260" />
            <p class="small">Studio may not work correctly until reload</p>
            <button class="btn" data-bind="click: ignoreWebSocketError"><i class="icon-warning"></i><span>Ignore</span></button>&nbsp;&nbsp;
            <button class="btn btn-primary" onclick="location.reload();">
                <i class="icon-refresh"></i>
                <span>Reload</span>
            </button>
        </div>
    </div>
    <div data-bind="if: displayUsageStatsInfo()">
        <div data-bind="compose: usageStatsView" class="bs3"></div>
    </div>
    <div class="graph-helper" data-bind="compose: $root.graphHelperView"></div>
    
    <div data-bind="if: isUpgradeModalVisible()">
        <div data-bind="react: $root.upgradeModalView"></div>
    </div>

    <div class="bs5">
        <div data-bind="react: protractedRequestMessageView"></div>
    </div>
</div>
